<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../tools/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/cart.css">
</head>

<body>
    <h1>购物车页面</h1>

    <div class="container"></div>

    <script src="../js/jquery.min.js"></script>
    <script>
        // 调用函数 生成 初始页面内容
        setPage();

        // 点击 点击事件 页面是动态生成 使用 事件委托语法
        $('.container').click(function(e) {
            // 获取 localStorage 中 cart 数据
            let cart = JSON.parse(localStorage.cart);

            // 点击标签 name 是 all 点击的是 全选标签
            if (e.target.getAttribute('name') === 'all') {
                // 给 cart 数值中 所有数据 buy属性的属性值 
                // 设置为 全选标签 checked 属性值
                cart.forEach(item => {
                    item.buy = e.target.checked;
                })

                // 点击标签 name 是 goods 点击的是 商品的input标签
                // 改变 点击标签 对应的 一个商品 buy 的值 是 true / false
            } else if (e.target.getAttribute('name') === 'goods') {

                // for(let i = 0 ; i <= cart.length-1 ; i++){
                //   // // 购物车数组中商品的goods_id 和 点击的标签存储的goods_id 相同
                //   // // 操作数据库 用 goods_id
                //   // if( cart[i].goods_id === e.target.getAttribute('goods_id') ){
                //   //   cart[i].buy = e.target.checked;
                //   //   break;
                //   // }
                // }


                // 数组中 对应的单元 buy 属性 修改为 点击标签的 checked属性值
                // 索引下标 是 标签 index属性值
                // 只是单纯的操作本地的数组 使用 索引下标也行
                cart[e.target.getAttribute('index')].buy = e.target.checked;

                // 点击标签 name 是 del 点击的是 我不要了 按钮
                // 找到 数组中对应的 数据单元 执行删除操作
            } else if (e.target.getAttribute('name') === 'del') {
                // 数组中 找到 对应的索引下标 开始 删除一个单元
                cart.splice(e.target.getAttribute('index'), 1);

                // 点击标签 name 是 - 点击的是 减 按钮
                // 找到 数组中对应的 数据单元 num 属性值 -1
            } else if (e.target.getAttribute('name') === '-') {
                // 数组中 找到 对应单元 num 存储的数值 -1
                cart[e.target.getAttribute('index')].num = cart[e.target.getAttribute('index')].num - 0 - 1;

                // 点击标签 name 是 + 点击的是 加 按钮
                // 找到 数组中对应的 数据单元 num 属性值 +1
            } else if (e.target.getAttribute('name') === '+') {
                // 数组中 找到 对应单元 num 存储的数值 +1
                cart[e.target.getAttribute('index')].num = cart[e.target.getAttribute('index')].num - 0 + 1;
            }







            console.log(cart);


            // 将 新数组的数据 写入给 localStorage 
            localStorage.cart = JSON.stringify(cart);
            // 根据 新的 localStorage 数据 再次动态渲染生成页面
            setPage();
        })


        // 封装一个函数 根据 localStorage 中的数据信息 动态生成页面
        function setPage() {
            // 获取 localStorage 中 cart 的数据信息
            let cart = localStorage.cart;
            // console.log( cart );

            if (cart === undefined) {
                // 表示 购物车 数据信息 还没有 创建 
                $('.container').html('<h1>您还没有购物记录,请您先去购物</h1>');

            } else {
                // 有 购物车 数据信息 需要将 json字符串 先转化为 对应的数据类型
                cart = JSON.parse(cart);

                if (cart.length === 0) {
                    // 表示 购物车 创建了 但是 其中的商品个数是0
                    $('.container').html('<h1>您的购物车是空车,请您添加商品</h1>');
                } else {
                    // 有车 有商品 动态渲染生成页面

                    // 定义变量 
                    let bool = true;
                    let type = 0;
                    let number = 0;
                    let pay = 0;

                    // 第一部分是: div --- ul的起始标签部分
                    let str = `
          <div class="panel panel-info ">
            <div class="panel-body bg-info">
              <div class="checkbox">
                <label>
                  <input name="all"type="checkbox" value="">
                  全选
                </label>
              </div>
            </div>
            <div class="panel-footer">
              <ul class="cart-list">
              `;

                    // 第二部分是: 根据数组 动态渲染生成 li标签
                    cart.forEach((item, key) => {
                        // 如果 有 一个商品 购买状态是 false
                        // 全选标签 状态也是 false不选中
                        if (item.buy === false) {
                            bool = false;
                        } else {
                            // 计算 购买种类,个数,金额
                            type++;

                            number += item.num - 0;

                            pay += (item.num - 0) * (item.goods_price - 0);
                        }

                        str += `
              
              <li class="cart-item">
                <div class="left">
                  <input name="goods" index="${key}"  goods_id="${item.goods_id}" type="checkbox" ${item.buy ? 'checked' : ''}>
                </div>
                <div class="right">
                  <div class="media">
                    <div class="media-left">
                      <a href="#">
                        <img class="media-object" src="${item.goods_small_logo}" alt="...">
                      </a>
                    </div>
                    <div class="media-body">
                      <h4 class="media-heading">${item.goods_name}</h4>
                      <p>
                        <i class="glyphicon glyphicon-yen"></i>
                        <span>${item.goods_price}</span>
                      </p>
                      <div class="btn-group pull-right" role="group" aria-label="...">
                        <button name="-" index="${key}" type="button" class="btn btn-default" ${ item.num === 1 ? 'disabled' : "" }>-</button>
                        <button type="button" class="btn btn-default" disabled>${item.num}</button>
                        <button name="+" index="${key}" type="button" class="btn btn-default" ${ item.num === item.goods_number-0 ? 'disabled' : "" }>+</button>
                      </div>
                      <button name="del" index="${key}" goods_id="${item.goods_id}" class="del btn btn-danger">我不要了</button>

                    </div>
                  </div>
                </div>
              </li>
            `;
                    })


                    // 第三部分是: ul的结束标签 --- div
                    str += `
              </ul>
              </div>

              <div>
                <h1>您一共购买 ${type} 种 商品</h1>
                <h1>您一共购买 ${number} 件 商品</h1>
                <h1>您一共支付 ${pay.toFixed(2)} 元 金额</h1>
              </div>
            </div>
          
          `;

                    // 将 str 写入 div标签
                    $('.container').html(str);

                    // 设定 全选标签 状态
                    $('[name="all"]').prop('checked', bool);
                }
            }
        }
    </script>

    <script>
        /*
                      1, 根据 localStorage 中的数据 动态渲染生成页面
                        (1) 没有创建过购物车
                          生成 没有创建 购物车的页面

                        (2) 有购物车信息 但是 是一个 空数组
                          生成 创建了购物车 但是 没有商品的信息

                        (3) 有 购物车信息 有具体的商品
                          动态渲染生成 页面
                            直接生成页面的 起始部分 div --- ul的起始标签
                            
                            循环遍历生成页面的中间部分  li标签

                            直接生成页面的 结束部分 ul的结束标签 --- div标签

                      2,  goods_id 和 索引下标 
                        如果 只是修改数组 不牵扯 数据库数据
                          你使用 索引下标 修改数组 完全没有问题

                        如果 本质是发送请求 修改数据库数据
                          那么就必须使用 goods_id 去数据库做数据的比对比较
                    
                    
                    */
    </script>
</body>

</html>